<script setup>
let list = [
  {
    name: "刘键",
    content: "周洋是小丑",
    img: "/img/美食/家常菜馆1.png",
    time: "2022-01-01:10:00",
    rate: 4.5
  }
];
</script>

<template>
  <div class="comments">
    <div class="comment-item" v-for="(item, index) in list">
      <div class="username">
        <div class="username-text">{{ item.name }}</div>
        <div class="rate-date">
        <div class="rate">
          <van-rate
            v-model="item.rate"
            :size="24"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
            readonly allow-half
          />
          {{item.rate}}
        </div>
        <div class="date">{{ item.time }}</div>
      </div>
      </div>
      <div class="img"><img :src="item.img" alt=""></div>
      <div class="comment">{{ item.content }}</div>
    </div>
  </div>
</template>


<style scoped>
.comments {
    padding: 0 30px;
}
.comment-item .username {
    font-weight: 400;
    font-size: 28px;
    color: #112950;
    line-height: 36px;
}

.comment-item .rate-date {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 21px;
}
.img img{
    width: 80px;
}
.rate-date .date {
    font-weight: 400;
    font-size: 28px;
    color: #B2BAC6;
}

.comment-item .comment {
   width: 588px;
    margin-top: 46px;
    font-weight: 400;
    font-size: 28px;
    color: #5E6F88;
}
</style>